// @import "weatherNav";
.content-box {
    display: flex;
    flex-direction: column;
}

.main-content-box {
    display: flex;
    flex: 1;

    >div {
        flex: 1;
    }

    .left-box {
        display: flex;
        flex-direction: column;

        >div {
            background: none;
        }

        .check-box {
            display: flex;
            text-align: center;
            padding-top: 30px;

            >div {
                display: flex;
                flex-direction: column;
                flex: 1;

                h4 {
                    color: #fff;
                    font-size: 18px;
                }
                .numberStyle{
                    margin: 20px auto 24px;
                }
                // i {
                //     display: flex;
                //     justify-content: center;
                //     margin: 20px auto 24px;
                //     color: #FFF000;
                //     line-height: 46px;
                //     font-size: 38px;

                //     b {
                //         width: 28px;
                //         height: 46px;
                //         margin: 0 3px;
                //         background: rgba(64, 127, 255, 0.2);
                //         border-radius: 4px;
                //     }
                // }

                p {
                    color: #fff;
                    font-size: 16px;
                }
            }
        }

        .echarts-box {
            flex: 1;
        }
    }

    .right-box {
        display: flex;
        flex-direction: column;
        margin-left: 10px;

        >div {
            flex: 1;
            padding: 0 10px;
        }

        .flex {
            display: flex;
            flex-direction: column;
        }

        .overnight-data {
            display: flex;
            background: none;
            padding: 0;

            >div {
                flex: 1;
                background-image: -moz-linear-gradient(90deg, rgba(126, 165, 243, .12) 0%, rgba(107, 180, 241, 0) 11%, rgba(41, 233, 233, 0) 50%, rgba(107, 181, 241, 0) 89%, rgba(126, 165, 243, 0.12) 100%);
                background-image: -webkit-linear-gradient(90deg, rgba(126, 165, 243, 0.12) 0%, rgba(107, 180, 241, 0) 11%, rgba(41, 233, 233, 0) 50%, rgba(107, 181, 241, 0) 89%, rgba(126, 165, 243, 0.12) 100%);
                background-image: -ms-linear-gradient(90deg, rgba(126, 165, 243, 0.12) 0%, rgba(107, 180, 241, 0) 11%, rgba(41, 233, 233, 0) 50%, rgba(107, 181, 241, 0) 89%, rgba(126, 165, 243, 0.12) 100%);
                padding: 0 10px;
            }
            >div:nth-of-type(1){
                margin-right:10px;
            }

            .title-box {
                i {
                    color: #14C6CA;
                }
            }
        }
    }
}

.echarts-box {
    flex: 1;
}

.radio-box {
    display: flex;
    justify-content: space-around;
    position: relative;
    width: 400px;
    margin: 0 auto;
    color: #fff;

    &::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 12px;
        z-index: 0;
        height: 1px;
        background: #14C6CA;
    }

    input {
        display: none;
    }

    label {
        display: flex;
        flex-direction: column;
        align-items: center;

        i {
            position: relative;
            z-index: 2;
            width: 8px;
            height: 8px;
            margin: 8px 0;
            background: rgba(255, 255, 255, 1);
            border-radius: 50%;
        }
    }

    input:checked+label {
        color: #14C6CA;

        i {
            width: 16px;
            height: 16px;
            margin: 4px 0;
            background: rgba(20, 198, 202, 1);
        }
    }
}